<template>
    <div class="global-help-detail-page">
        <el-card shadow="never">
            <el-form
                :model="form"
                label-position="right"
                label-suffix=":"
                label-width="140px"
                ref="form"
                :rules="rules"
                v-loading="loading"
            >
                <el-form-item label="标题" prop="name">
                    <el-input
                        v-model="form.name"
                        placeholder="请输入标题"
                        class="input-width">
                    </el-input>
                </el-form-item>
                <el-form-item label="问题类别" prop="category_id">
                    <el-select
                        v-model="form.category_id"
                        placeholder="请选择问题类别"
                        class="input-width w-full">
                        <el-option
                            v-for="item in categoryOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="问题正文内容" prop="content">
                    <div class="flex items-center mb-2">
                        <el-button type="primary" @click="drawer = true">预览正文</el-button>
                        <VideoUpload
                            class="ml-2"
                            v-model="video"
                            ref="videoUpload"
                            :accept="'.mp4,.rmvb,.avi'"
                            :disabled="uploading"
                            @next="next"
                            @complete="complete">
                            <el-button :loading="uploading" type="primary">上传视频</el-button>
                            <el-button @click.stop="cannel" type="primary" v-if="uploading">取消上传</el-button>
                        </VideoUpload>
                    </div>
                    <div class="my-2 border p-2 pb-0 rounded" v-if="videoList.length">
                        <el-tag class="mb-2 block fit-content" v-for="item in videoList" :key="item">{{ item }}</el-tag>
                    </div>
                    <tinymce v-model="form.content"></tinymce>
                </el-form-item>
                <el-form-item label="是否是常见问题" prop="is_common" required>
                    <el-radio v-model="form.is_common" :label="true">是</el-radio>
                    <el-radio v-model="form.is_common" :label="false">否</el-radio>
                </el-form-item>
            </el-form>
            <div class="text-center">
                <el-button :loading="loading" type="primary" @click="onSave">保 存</el-button>
                <el-button @click="onReturn">返回</el-button>
            </div>
        </el-card>

        <el-drawer
            title="预览"
            :visible.sync="drawer"
            direction="rtl">
            <div class="px-2 py-2" v-html="form.content"></div>
        </el-drawer>
    </div>
</template>

<script>
import { Drawer } from 'element-ui';
import Tinymce from '@/components/base/Tinymce';
import VideoUpload from '@/components/base/VideoUpload';

export default {
    components: {
        Tinymce,
        ElDrawer: Drawer,
        VideoUpload,
    },
    data() {
        return {
            drawer: false,
            loading: false,
            uploading: false,
            form: {
                category_id: '',
                content: '',
                is_common: false,
                name: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                ],
                content: [
                    { required: true, message: '请输入问题正文内容', trigger: 'blur' },
                ],
                category_id: [
                    { required: true, message: '请输选择问题类别', trigger: 'change' },
                ],
            },
            categoryOptions: [],
            video: '',
            // 上传视频列表
            videoList: [],
        };
    },
    methods: {
        onSave() {
            this.$refs.form.validate(vali => {
                if (vali) this.postData();
            });
        },
        postData() {
            let method = 'post';
            let message = '新增成功';

            if (this.id) {
                method = 'put';
                message = '编辑成功';
            }

            this.loading = true;
            API[method]('problem', this.form).then(() => {
                $ele.$message.success(message);
                this.onReturn();
            }).finally(() => this.loading = false);
        },
        fetchData() {
            this.loading = true;
            API.get(`problem/${this.id}`).then(res => {
                this.form = res;
            }).finally(() => this.loading = false);
        },

        onReturn() {
            this.$router.back();
        },

        getCategoryOptions() {
            API.get('problem_category/list').then(res => {
                this.categoryOptions = res;
            });
        },

        // 取消上传
        cannel() {
            this.$refs.videoUpload.unsubscribe();
            this.video = '';
            this.uploading = false;
        },
        // 上传开始
        next() {
            this.uploading = true;
        },
        // 上传完成
        complete(e) {
            this.video = e.access_url;
            this.videoList.push(e.access_url);
            this.uploading = false;
        },
    },
    mounted() {
        const id = this.$route.params.id;
        this.getCategoryOptions();

        if (id) {
            this.id = id;
            this.fetchData();
        }
    },
};
</script>

<style lang="scss">
.global-help-detail-page {
    .input-width {
        max-width: 300px;
    }

    .el-drawer__header > :first-child,
    .el-drawer__open .el-drawer.rtl {
        outline: none;
    }

    .el-drawer__open .el-drawer.rtl {
        width: 40% !important;
    }

    .fit-content {
        width: fit-content;
    }
}
</style>
